<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>运行状态</title>
		<link rel="stylesheet" href="assets/css/common.css">
		<link rel="stylesheet" href="assets/css/run-state.css">
		<link rel="stylesheet" href="assets/css/aqi.css">
	</head>
	<body>
		<div class="main-page page-run-state">
			<div class="page-body flex">
				<div class="sub-page-container">
					<div class="right-content-wrapper">
						<div class="right-content-box">
							<ul class="tags">
								<!-- <li class="to-back" onclick="javascript:history.back()">返回</li> -->
								<li>有组织</li>
								<li>&gt;</li>
								<li>运行状态</li>
							</ul>
							<div class="content-section">
								<div class="card-section mgb-10">
									<p class="card-title">设备投入与使用量</p>
									<div class="content-body flex">
										<div class="wrate-50" id="deviceChart"></div>

										<ul class="wrate-50 circle-plus">
											<li class="circle-ui">
												<canvas id="deviceTotal"></canvas>
											</li>
											<li class="circle-ui">
												<canvas id="inlineNumber"></canvas>
											</li>
											<li class="circle-ui">
												<canvas id="inlineRate"></canvas>
											</li>
											<li class="circle-ui">
												<canvas id="unlineRate"></canvas>
											</li>
										</ul>
									</div>
								</div>
								<div class="card-section mgl-10 mgb-10">
									<p class="card-title">能耗分析</p>
									<div class="content-body relative" id="energy">
										<div class="silder-title">
											<span class="on">耗电量(kw/h)</span>
											<span>耗水量(t)</span>
											<span>运行时长(h)</span>
										</div>
										<div class="type-container">
											<ul class="type-ul">
												<li>
													<div id="weekOfElectricity" class="chart-box"></div>
													<div class="bg-box"></div>
												</li>
												<li class="pd-all-16">
													<div class="water-rate" id="waterRate"></div>
												</li>
												<li class="pd-all-16">
													<div class="water-rate" id="timeTotal"></div>
												</li>
											</ul>
										</div>
										<div class="lenges lenges-electricity">
											<span class="active" target="week">周耗电量</span>
											<span target="month">月耗电量</span>
											<span target="year">年耗电量</span>
										</div>
										<div class="lenges lenges-water">
											<span class="active" target="week">周耗水量</span>
											<span target="month">月耗水量</span>
											<span target="year">年耗水量</span>
										</div>
									</div>
								</div>
								<div class="card-section">
									<p class="card-title">设备启停</p>
									<div class="content-body">
										<table class="table">
											<thead>
												<tr>
													<th>序号</th>
													<th>设备名称</th>
													<th>设备编号</th>
													<th>运行时长(h)</th>
													<th>维保时间</th>
													<th>维保人</th>
													<th>设备类型</th>
													<th>所在区域</th>
												</tr>
											</thead>
											<tbody class="tbody">
												<tr>
													<td>1</td>
													<td>02</td>
													<td>02</td>
													<td>455</td>
													<td>2020-02-02</td>
													<td>奥凯洛</td>
													<td class="complete">监测设备</td>
													<td>煤棚1#</td>
												</tr>
												<tr>
													<td>1</td>
													<td>02</td>
													<td>02</td>
													<td>455</td>
													<td>2020-02-02</td>
													<td>奥凯洛</td>
													<td>监测设备</td>
													<td>煤棚1#</td>
												</tr>
												<tr>
													<td>1</td>
													<td>02</td>
													<td>02</td>
													<td>455</td>
													<td>2020-02-02</td>
													<td>奥凯洛</td>
													<td>监测设备</td>
													<td>煤棚1#</td>
												</tr>
												<tr>
													<td>1</td>
													<td>02</td>
													<td>02</td>
													<td>455</td>
													<td>2020-02-02</td>
													<td>奥凯洛</td>
													<td>监测设备</td>
													<td>煤棚1#</td>
												</tr>
												<tr>
													<td>1</td>
													<td>02</td>
													<td>02</td>
													<td>455</td>
													<td>2020-02-02</td>
													<td>奥凯洛</td>
													<td>监测设备</td>
													<td>煤棚1#</td>
												</tr>
												<tr>
													<td>1</td>
													<td>02</td>
													<td>02</td>
													<td>455</td>
													<td>2020-02-02</td>
													<td>奥凯洛</td>
													<td>监测设备</td>
													<td>煤棚1#</td>
												</tr>
												<tr>
													<td>1</td>
													<td>02</td>
													<td>02</td>
													<td>455</td>
													<td>2020-02-02</td>
													<td>奥凯洛</td>
													<td>监测设备</td>
													<td>煤棚1#</td>
												</tr>
												<tr>
													<td>1</td>
													<td>02</td>
													<td>02</td>
													<td>455</td>
													<td>2020-02-02</td>
													<td>奥凯洛</td>
													<td>监测设备</td>
													<td>煤棚1#</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
								<div class="card-section mgl-10">
									<p class="card-title">设备启停</p>
									<div class="content-body">
										<table class="table">
											<thead>
												<tr>
													<th>序号</th>
													<th>时间</th>
													<th>区域</th>
													<th>设备名称)</th>
													<th>启动类型</th>
													<th>停止类型</th>
													<th>运行时长</th>
												</tr>
											</thead>
											<tbody class="tbody">
												<tr>
													<td>1</td>
													<td>2020-02-02</td>
													<td>煤棚1#</td>
													<td>4#干雾机</td>
													<td class="complete">现场手动</td>
													<td>远程手动</td>
													<td>4小时</td>
												</tr>
												<tr>
													<td>1</td>
													<td>2020-02-02</td>
													<td>煤棚1#</td>
													<td>4#干雾机</td>
													<td class="complete">现场手动</td>
													<td>远程手动</td>
													<td>4小时</td>
												</tr>
												<tr>
													<td>1</td>
													<td>2020-02-02</td>
													<td>煤棚1#</td>
													<td>4#干雾机</td>
													<td class="complete">现场手动</td>
													<td>远程手动</td>
													<td>4小时</td>
												</tr>
												<tr>
													<td>1</td>
													<td>2020-02-02</td>
													<td>煤棚1#</td>
													<td>4#干雾机</td>
													<td class="complete">现场手动</td>
													<td>远程手动</td>
													<td>4小时</td>
												</tr>
												<tr>
													<td>1</td>
													<td>2020-02-02</td>
													<td>煤棚1#</td>
													<td>4#干雾机</td>
													<td class="complete">现场手动</td>
													<td>远程手动</td>
													<td>4小时</td>
												</tr>
												<tr>
													<td>1</td>
													<td>2020-02-02</td>
													<td>煤棚1#</td>
													<td>4#干雾机</td>
													<td class="complete">现场手动</td>
													<td>远程手动</td>
													<td>4小时</td>
												</tr>
												<tr>
													<td>1</td>
													<td>2020-02-02</td>
													<td>煤棚1#</td>
													<td>4#干雾机</td>
													<td class="complete">现场手动</td>
													<td>远程手动</td>
													<td>4小时</td>
												</tr>
												<tr>
													<td>1</td>
													<td>2020-02-02</td>
													<td>煤棚1#</td>
													<td>4#干雾机</td>
													<td>现场手动</td>
													<td>远程手动</td>
													<td>4小时</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
						<span class="close-btn"></span>
					</div>
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script src="assets/js/jquery.SuperSlide.2.1.3.js"></script>
		<script src="assets/js/page.js"></script>
		<script src="assets/js/semicircle.js"></script>
		<script src="assets/js/deviceNumber.js"></script>
		<script src="assets/js/autoSilder.js"></script>
		<script src="assets/js/echarts.min.js"></script>
		<script src="assets/js/aqi.js"></script>
		<script>
			var PageObj = function(){
				this.init()

				// 渲染底部菜单
				new Footer({
			        el:".main-page",
			        curMenu:"清洁运输",
			        size:4,
			        menus:[
			            {href:"有组织.html",text:"有组织"},
			            {href:"无组织.html",text:"无组织"},
			            {href:"车辆出入.html",text:"清洁运输"},
			            {href:"视频.html",text:"视频大厅"}
			        ]
			    });

			    // 渲染左侧菜单树
				new LeftSiderMenu({
				    el:".sub-page-container",
				    size:10,
				    curMenu:"运行状态",
				    menus:[
				        {href:"首页.html",text:"首页"},
				        {href:"排放清单.html",text:"实时监测"},
				        {href:"数据分析.html",text:"数据分析"},
				        {href:"告警分析.html",text:"告警分析"},
				        {href:"运行状态.html",text:"运行状态"}
				    ]
				});
			}
			PageObj.prototype.init = function(){
				this.initPage();
				this.bindEvent();
			}
			PageObj.prototype.initPage = function(){
				let self = this;
				
				new DeviceNumber({
					el : "#deviceChart",
					data:[
						{name:"治理设备",value:100},
						{name:"监控设备",value:90},
						{name:"监测设备",value:50}
					],
					colors:['linear-gradient(to top, #4346DA 0%,#2E71EA 100%)','linear-gradient(180deg, #16CEB9 0%, #1159BA 100%)','linear-gradient(180deg, #9569F8 0%, #3E21D6 100%)']
				})

				new Semicircle({
					el:"#deviceTotal",
					rate:100,
					linearColor:['rgba(31,144,181,0.9)','rgba(22,93,180,1)'],
					name:"设备总量",
					nameColor:"rgba(40, 180, 255, 1)",
					rateColor:"rgba(40, 180, 255, 1)"
				});

				
				new Semicircle({
					el:"#inlineNumber",
					rate:80,
					baseCircleColor:"rgba(26,43,167,0.2)",
					name:"在线量",
					nameColor:"rgba(40, 180, 255, 1)",
					rateColor:"rgba(40, 180, 255, 1)"
				});

				new Semicircle({
					el:"#inlineRate",
					rate:70,
					name:"在线率",
					nameColor:"rgba(40, 180, 255, 1)",
					linearColor:['rgba(70,39,217,1)','rgba(137,95,243,1)'],
					rateColor:"rgba(40, 180, 255, 1)",
					linearColor:['rgba(18,99,243,1)','rgba(36,85,232,0.5)'],
				});

				
				new Semicircle({
					el:"#unlineRate",
					value:20,
					rate:20,
					name:"离线率",
					linearColor:['rgba(249,49,105,1)','rgba(175,36,75,1)'],
					nameColor:"rgba(40, 180, 255, 1)",
					rateColor:"rgba(40, 180, 255, 1)"
				});

				$("#energy").autoSilder({
					navCell:"div.silder-title",
					mainCell:"ul.type-ul",
					autoPlay:false,
					pageChange:function(i){
						var electricity = $(".lenges-electricity");
						var water = $(".lenges-water");
				 		// 大于等于1隐藏耗电量
				 		if(i<2){
				 			if(i==0){
				 				electricity.css("display","inline-flex");
				 				water.hide();
				 			}else{
				 				electricity.hide();
				 				water.css("display","inline-flex");
				 			}
				 		}else{
				 			$(".lenges").hide();

				 			self.timeTotal.setValue({
				 				value:[
				 					{value: Math.floor(Math.random(100)*100), name: '煤棚1'},
					                {value: 55, name: '煤棚2'},
					                {value: 50, name: '煤棚3'},
					                {value: 44, name: '焦煤棚'},
					                {value: 42, name: '皮带'},
					                {value: 41, name: '道路'},
					                {value: 40, name: '厂界'}
				 				]
				 			})
				 		}
				 	}
				})
				
				this.weekOfElectricity = echarts.init(document.getElementById('weekOfElectricity'));

				let data = [
					{value: 500, name: '煤棚1'},
	                {value: 535, name: '煤棚2'},
	                {value: 580, name: '煤棚3'},
	                {value: 484, name: '焦煤棚'},
	                {value: 400, name: '皮带'},
	                {value: 420, name: '道路'},
	                {value: 440, name: '厂界'}
				]

		        this.weekOfElectricity.setOption({
		        	color:['#28B4FF','#16CEB9','#D5A71D','#B353DF','#DD7F0A','#00BCFE','#DADF2E'],
				    tooltip: {
				        trigger: 'item'
				    },
				    legend: {
				        width:300,
				        right: '12%',
				        padding:30,
				        itemGap:30,
				        y:'center',
				        icon: "circle",
				        textStyle:{
				        	color:"#ffffff"
				        },
				        formatter: function (name) {
				        	var curData = data.filter(function(item){
				        		return item.name == name
				        	})
						    return name +" "+ curData[0].value;
						}
				    },
				    series: [
				        {
				            name: '耗电量',
				            type: 'pie',
				            center:['20%','50%'],
				            roseType: 'radius',
				            label:{
				                show:false  
				            },
				            labelLine:{
				                show:false  
				            },
				            data: data,
				            emphasis: {
				                itemStyle: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
		        })

		        this.waterRate = new Aqi({
					el:"#waterRate",
				 	barWidth:6,
				 	showTitle:false,
				 	color:['linear-gradient(270deg, #2841FF 0%, #51DBFF 100%)','linear-gradient(180deg, #0046B9 0%, #00128C 100%)','linear-gradient(270deg, #67BFD6 0%, #33B136 100%)','linear-gradient(270deg, #2841FF 0%, #51DBFF 100%)','linear-gradient(270deg, #65CE60 0%, #51DBFF 100%)','linear-gradient(270deg, #A379DE 0%, #4B4DAC 100%, #FB8818 100%)','linear-gradient(270deg, #79C8DE 0%, #4B4DAC 100%, #FB8818 100%)'
				 	],
				 	value:[
				 		{name:"煤棚1",value:66},
				 		{name:"煤棚2",value:45},
				 		{name:"煤棚3",value:60},
				 		{name:"焦煤棚",value:78},
				 		{name:"道路",value:188},
				 		{name:"厂界",value:277},
				 		{name:"皮带",value:99}
				 	]
				})

		        this.timeTotal = new Aqi({
					el:"#timeTotal",
				 	barWidth:6,
				 	showTitle:false,
				 	orient:"vertical",
				 	color:['linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)','linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)','linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)','linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)','linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)','linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)','linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)'],
				 	value:[
				 		{name:"煤棚1",value:66},
				 		{name:"煤棚2",value:45},
				 		{name:"煤棚3",value:60},
				 		{name:"焦煤棚",value:78},
				 		{name:"道路",value:188},
				 		{name:"厂界",value:277},
				 		{name:"皮带",value:99}
				 	]

				})
			}

			PageObj.prototype.bindEvent = function(){
				var self = this;
				let data = [
	            	{value: 50, name: '煤棚1'},
	                {value: 55, name: '煤棚2'},
	                {value: 50, name: '煤棚3'},
	                {value: 44, name: '焦煤棚'},
	                {value: 42, name: '皮带'},
	                {value: 41, name: '道路'},
	                {value: 40, name: '厂界'}
	            ];
	            let data1 = [
	            	{value: 70, name: '煤棚1'},
	                {value: 55, name: '煤棚2'},
	                {value: 50, name: '煤棚3'},
	                {value: 44, name: '焦煤棚'},
	                {value: 82, name: '皮带'},
	                {value: 141, name: '道路'},
	                {value: 40, name: '厂界'}
	            ];

	            let data2 = [
	            	{value: 170, name: '煤棚1'},
	                {value: 155, name: '煤棚2'},
	                {value: 150, name: '煤棚3'},
	                {value: 144, name: '焦煤棚'},
	                {value: 182, name: '皮带'},
	                {value: 141, name: '道路'},
	                {value: 140, name: '厂界'}
	            ];

	            // 耗电量切换
				$("body").on("click",".lenges-electricity span",function(ele){
					var target = $(this).attr("target");
					$(this).siblings("span").removeClass("active");
					$(this).addClass("active");
					self.weekOfElectricity.setOption({
						legend: {
							width:300,
					        formatter: function (name) {
					        	var d = target=="week"?data:target=="month"?data1:data2
					        	var curData = d.filter(function(item){
					        		return item.name == name
					        	})
							    return name +" "+ curData[0].value;
							}
					    },
						series: [
					        {
					            name: '耗电量',
					            data: target=="week"?data:target=="month"?data1:data2
					        }
					    ]
					})		
				})

				// 耗水量切换
				$("body").on("click",".lenges-water span",function(ele){
					$(this).siblings("span").removeClass("active");
					$(this).addClass("active");
					self.waterRate.setValue({
						value:[
					 		{name:"煤棚1",value:Math.floor(Math.random(100)*100)},
					 		{name:"煤棚2",value:Math.floor(Math.random(100)*100)},
					 		{name:"煤棚3",value:Math.floor(Math.random(100)*100)},
					 		{name:"焦煤棚",value:Math.floor(Math.random(100)*100)},
					 		{name:"道路",value:Math.floor(Math.random(100)*100)},
					 		{name:"厂界",value:Math.floor(Math.random(100)*100)},
					 		{name:"皮带",value:Math.floor(Math.random(100)*100)}
					 	]
					});
				})
			}

			window.onload = function(){
				new PageObj();
			}
			
		</script>
	</body>
</html>
